<template>
  <div class="project" style="margin: 10px">
    <div>
      <SearchForm :area="'basic'" :query="queryParam" @onSearch="initData" @onSure="onSave" @exportXls="exportXls"
        @onSubmit="onSubmit" />
    </div>
    <a-divider />

    <div style="font-size: 24px;text-align: center; font-weight: bold;">
      <h1>锡山区小型零星工程安全生产管理工作统计表({{ queryParam.startTime }}~{{ queryParam.endTime }})</h1>
    </div>
    <a-form>
      <a-row :gutter="24">
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="填报单位">
            <a-input v-model="tableData.fillInUnit" allowClear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="填报人">
            <a-input v-model="tableData.fillInUnitPerson" allowClear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="联系电话">
            <a-input v-model="tableData.fillInUnitPhone" allowClear />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item v-bind="formItemLayout" label="填报日期">
            <a-input v-model="tableData.fillInUnitDate" allowClear placeholder="" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-table :columns="columns" :data-source="[tableData]" :rowKey="record => record.id" bordered size="middle">
        <template
          v-for="col in ['smallProjectNum', 'zeroProjectNum', 'allProject', 'persons', 'personTimes', 'projects','dumProjects', 'problems', 'handlings', 'rectificationRate']"
          :slot="col" slot-scope="text, record, index">
          <div :key="col">
            <a-input style="margin: -5px 0" v-model="tableData[col]" :value="text"
              @change="e => handleChange(e.target.value, record.key, col)" />
          </div>
        </template>
      </a-table>
      <a-row :gutter="24">
        <a-col :lg="24" :md="24" :sm="24">
          <a-form-item :style="{ float: 'right' }">
            <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
            <!-- <a-button v-if="area == 'basic'" style="margin-left: 14px;" @click="exportExcel(queryParam)">导出工程清单</a-button> -->
            <!-- <a-button type="primary" style="margin-left: 14px;" @click="onSave()">保存</a-button> -->
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { parseTime } from '@/utils/util'
import SearchForm from './modules/searchformForProject'
import { GetProjectStatisticsByDepartmentIDYearMonth, SaveProjectStatistics, ExportProjectStatistics, SubmitProjectStatistics } from '@/api/statistics'

const userInfo = Vue.ls.get(ACCESS_TOKEN) // DepartmentID
export default {
  components: { SearchForm },
  data() {
    return {
      userInfo,
      spinning: false,
      queryParam: {
        id: '',
        departmentID: '',
        year: '',
        month: '',
        startTime: '',
        endTime: '',
        fillInUnit: '',
        fillInUnitPerson: '',
        fillInUnitPhone: '',
        fillInUnitDate: '',
        smallProjectNum: '',
        zeroProjectNum: '',
        allProject: '',
        persons: '',
        projects: '',
        dumProjects: '',
        problems: '',
        handlings: '',
        rectificationRate: '',
        updateUserID: '',
        updateTime: '',
        isSubmit: ''
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      columns: [
        {
          title: '监管情况',
          children: [
            {
              title: '已登记小型工程数（个）',
              dataIndex: 'smallProjectNum',
              key: 'smallProjectNum',
              width: 50,
              scopedSlots: { customRender: 'smallProjectNum' }
            },
            {
              title: '已登记零星作业数（个）',
              dataIndex: 'zeroProjectNum',
              key: 'zeroProjectNum',
              width: 50,
              scopedSlots: { customRender: 'zeroProjectNum' }
            },
            {
              title: '本地区小型零星工程合计（个）',
              dataIndex: 'allProject',
              key: 'allProject',
              width: 50,
              scopedSlots: { customRender: 'allProject' }
            },
            {
              title: '本地区备案工程合计（个）',
              dataIndex: 'allProjects',
              key: 'allProjects',
              width: 50,
              scopedSlots: { customRender: 'allProjects' },
              align: 'center'
            }
          ]
        },
        {
          title: '开展巡查情况',
          children: [
            {
              title: '出动检查人员（人）',
              dataIndex: 'persons',
              key: 'persons',
              width: 50,
              scopedSlots: { customRender: 'persons' }
            },
            {
              title: '出动检查人次',
              dataIndex: 'personTimes',
              key: 'personTimes',
              width: 50,
              scopedSlots: { customRender: 'personTimes' }
            },
            {
              title: '检查工程数（个）',
              dataIndex: 'projects',
              key: 'projects',
              width: 50,
              scopedSlots: { customRender: 'projects' }
            },
            {
              title: '期间内备案工程检查数(个)',
              dataIndex: 'dumProjects',
              key: 'dumProjects',
              width: 50,
              scopedSlots: { customRender: 'dumProjects' },
              align: 'center'
            },
            {
              title: '发现隐患总数（项）',
              dataIndex: 'problems',
              key: 'problems',
              width: 50,
              scopedSlots: { customRender: 'problems' }
            },
            {
              title: '已整改隐患总数（项）',
              dataIndex: 'handlings',
              key: 'handlings',
              width: 50,
              scopedSlots: { customRender: 'handlings' }
            },
            {
              title: '隐患整改率（%）',
              dataIndex: 'rectificationRate',
              key: 'rectificationRate',
              width: 50,
              scopedSlots: { customRender: 'rectificationRate' }
            }
          ]
        }
      ],
      thisYear: '',
      thisMonth: '',
      parseTime: parseTime,
      tableData: {}
    }
  },
  created() {
    const { initData } = this
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth()
    const startTime = new Date(year, month, 1)
    const param = {
      departmentID: this.userInfo.DepartmentID,
      startTime: parseTime(startTime, '{y}-{m}-{d}'),
      endTime: parseTime(date, '{y}-{m}-{d}')
      // year: date.getFullYear(),
      // month: date.getMonth() + 1
    }
    this.queryParam.departmentID = this.userInfo.DepartmentID
    this.queryParam.year = date.getFullYear()
    this.queryParam.month = date.getMonth() + 1
    this.queryParam.startTime = parseTime(startTime, '{y}-{m}-{d}')
    this.queryParam.endTime = parseTime(date, '{y}-{m}-{d}')
    this.thisYear = date.getFullYear()
    this.thisMonth = date.getMonth() + 1
    initData(param)
  },
  methods: {
    initData(data) {
      this.spinning = true
      GetProjectStatisticsByDepartmentIDYearMonth(data)
        .then(res => {
          this.tableData = res.data
          this.tableData.departmentID = data.departmentID
          this.tableData.year = data.year
          this.tableData.month = data.month
        })
        .finally(() => {
          this.spinning = false
        })
    },
    onSave() {
      SaveProjectStatistics(this.tableData).then(() => {
        this.$message.success('保存成功!')
        const param = {
          departmentID: this.userInfo.DepartmentID,
          year: date.getFullYear(),
          month: date.getMonth() + 1
        }
        this.initData(param)
      })
    },
    onSubmit() {
      if (this.queryParam.isSubmit) {
        this.$message.warning('不可重复上报!')
      } else {
        SubmitProjectStatistics({ psID: this.queryParam.id }).then(() => {
          this.$message.success('保存成功!')
          const date = new Date()
          const param = {
            departmentID: this.userInfo.DepartmentID,
            year: date.getFullYear(),
            month: date.getMonth() + 1
          }
          this.initData(param)
        }).catch(err => this.$message.error(err))
      }
    },
    handleChange() { },
    jsonParse(str) {
      const a = JSON.parse(str)
      return a
    },
    exportXls(data) {
      ExportProjectStatistics(data)
        .then(res => {
          const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>
<style lang="less">
.project {

  .ant-table-thead>tr>th,
  .ant-table-tbody .ant-table-row-cell-break-word {
    border: .5px solid #273c73;
  }
}
</style>
